<template>
  <div class="custom_button">
    <button
      type="button"
      class="custom_button_panel"
      :class="item.color"
      :disabled="item.disabled"
    >
      <div class="custom_button_panel_center" @click="buttonClickHandle">
        <div class="custom_button_panel_center_left">
          <slot name="icon"></slot>
        </div>
        <div class="custom_button_panel_center_right">
          {{ item.text }}<slot name="text"></slot>
        </div>
      </div>
      <div class="custom_button_disabled" v-if="item.disabled"></div>
    </button>
  </div>
</template>
<script>
export default {
  name: "defaultButton",
  props: {
    item: {
      type: Object,
      default() {
        return {
          color: "green",
          text: "按钮",
        };
      },
    },
  },
  data() {
    return {
      color: {
        type: Array,
        default() {
          return ["red", "green", "blue", "yellow", "default"];
        },
      },
    };
  },
  methods: {
    buttonClickHandle() {
      this.$parent.$emit("buttonClickHandle", this.$props.item.type);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_button {
  margin: 0 (2.5 / @base);
  min-width: (60 / @base);
  .custom_button_panel {
    width: 100%;
    border: 0;
    border-radius: (5 / @base);
    padding: (5 / @base) (5 / @base);
    position: relative;
    &.default {
      background-color: #efefef;
      .custom_button_panel_center {
        color: #333;
      }
    }
    &.red {
      background-color: #903749;
      .custom_button_panel_center {
        color: #fff;
      }
    }
    &.green {
      background-color: #07c160;
      .custom_button_panel_center {
        color: #fff;
      }
    }
    &.blue {
      background-color: #28527a;
      .custom_button_panel_center {
        color: #fff;
      }
    }
    &.yellow {
      background-color: #fb743e;
      .custom_button_panel_center {
        color: #383e56;
      }
    }
    .custom_button_disabled {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .custom_button_panel_center {
      display: flex;
      .custom_button_panel_center_left {
        width: 20%;
        .van-icon {
          vertical-align: middle;
        }
      }
      .custom_button_panel_center_right {
        padding: 0 (5 / @base);
        width: 80%;
        font-size: (12 / @base);
        text-align: center;
      }
    }
  }
}
</style>
